<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import gdsxjd from './tabs/gdsxjd.vue'
import gdzljd from './tabs/gdzljd.vue'
import jdbbbg from './tabs/jdbbbg.vue'

import TreeUtilDTO from '@/utils/tree'
import { useMainStore } from '@/store/main'

// onMounted(() => {
//   changeTabs('gdsxjd')
// })

const store = useMainStore()
// 入参

const activeName = ref('gdsxjd')

const gdsxjdRef = ref<InstanceType<typeof gdsxjd>>()
const gdzljdRef = ref<InstanceType<typeof gdzljd>>()
const jdbbbgRef = ref<InstanceType<typeof jdbbbg>>()

let tabsList = reactive([
  {
    label: '归档时效监督',
    name: 'gdsxjd',
    closable: false,
  },
  {
    label: '归档质量监督',
    name: 'gdzljd',
    closable: false,
  },
  {
    label: '监督报表报告',
    name: 'jdbbbg',
    closable: false,
  },
])
</script>
<template>
  <div class="container">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane
        v-for="item in tabsList"
        :key="item.name"
        :label="item.label"
        :name="item.name"
        :closable="item.closable"
        lazy
      >
        <gdsxjd ref="gdsxjdRef" v-if="activeName === 'gdsxjd' && item.label === '归档时效监督'" />
        <gdzljd ref="gdzljdRef" v-if="activeName === 'gdzljd' && item.label === '归档质量监督'" />
        <jdbbbg ref="jdbbbgRef" v-if="activeName === 'jdbbbg' && item.label === '监督报表报告'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>
